<template>
	<view>
		<view class="none_wrapper" v-if="listData.length === 0 && !isLoadingFile">
			<image src="https://dy.sykj365.com/uploads/mini/zanwu@2x.png" mode="widthFix"></image>
			<view class="p_font_28 p_color_b2">暂无待打印文件～</view>
			<view class="print_btn" @click="isUpShow = true">
				<image src="https://dy.sykj365.com/uploads/mini/jia2@2x.png"></image>
				<view class="p_font_28">添加打印文件</view>
			</view>
		</view>
		<view v-if="listData.length > 0 || isLoadingFile">
			<view class="print_top p_font_26" v-if="!isbatchesDel">
				<navigator url="/pages/index/share" hover-class="none" class="p_flex2 p_tb_8">
					<image src="https://dy.sykj365.com/uploads/mini/fenxiangicon.png" class="active" mode="heightFix"></image>
					<view>分享清单</view>
				</navigator>
				<view class="p_flex2 p_tb_8 p_margin_l_30" @click="getBatchesDel">
					<image src="https://dy.sykj365.com/uploads/mini/shanchu@2x.png"></image>
					<view>批量删除</view>
				</view>
				<navigator url="/pages/index/merge" hover-class="none" class="p_flex2 p_tb_8 p_margin_l_30">
					<image src="https://dy.sykj365.com/uploads/mini/hebin@2x.png"></image>
					<view>合并文件</view>
				</navigator>
				<view class="p_flex2 p_tb_8 p_margin_l_30 p_margin_r_32" @click="getBatchesSet">
					<image src="https://dy.sykj365.com/uploads/mini/piliang.png"></image>
					<view>批量操作</view>
				</view>
			</view>
			<view class="tips_wrapper p_flex2" v-if="!isbatchesDel">
				<image src="https://dy.sykj365.com/uploads/mini/laba.png" class="p_img_32 p_margin_r_16"></image>
				<swiper autoplay circular vertical :interval="2000" style="flex: 1;height: 100%;">
					<swiper-item v-for="(item, index) in systemNotice" :key="index">
						<view class="p_font_24 p_color_05b570 p_flex_1 p_one_text"
							style="height: 100%;line-height: 50rpx;">{{item}}</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="print_main p_b_128" :class="{'p_t_142': !isbatchesDel}">
				<view class="print_list" v-if="isLoadingFile">
					<view class="p_font_32">{{loadingFileName}}</view>
					<view class="p_flex2 p_margin_t_16">
						<view class="progress_wrapper">
							<view :style="'width: ' + progress + '%'"></view>
						</view>
						<view class="p_font_24 p_color_7a p_text_r" style="width: 90rpx;">{{progress}}%</view>
					</view>
					<view class="p_flex9 p_margin_t_24">
						<view class="p_font_20 p_color_b2">加密上传中</view>
						<view class="p_font_26 p_color_05b570" @click="getCancelUp">取消上传</view>
					</view>
				</view>
				<listDataView :index="index" :item="item" :deleteState="deleteState" v-for="(item, index) in listData"
					@getChoose="getChoose" @getIsChoose="getIsChoose" @getDelView="getDelView"
					@getChooseNum="getChooseNum">
				</listDataView>
				<!-- <navigator class="p_text_c p_color_05b570 p_font_24" style="margin-bottom: 32rpx;" hover-class="none"
					url="/pages/my/agency?type=1">邀请下单获取返利</navigator> -->
			</view>
			<bottomView btnText1="去支付" :isShowPrice="true" :priceNum="allPriceNum" v-if="!isbatchesDel"
				@getSubmit="getPaySubmit">
				<view class="p_flex2" @click="getAllPrint">
					<image src="https://dy.sykj365.com/uploads/mini/weixuanzhong@2x.png" class="p_img_48 p_margin_r_8"
						v-if="!isAllChoose"></image>
					<image src="https://dy.sykj365.com/uploads/mini/xuanzhong@2x.png" class="p_img_48 p_margin_r_8" v-else></image>
					<view class="p_font_24 p_color_7a">全选</view>
				</view>
			</bottomView>
			<bottomView btnText1="删除" btnText2="取消" :isShowPrice="false" v-else @getSubmit="getDelSubmit"
				@getClear="getDelClear">
				<view class="p_flex2" @click="getAllDel">
					<image src="https://dy.sykj365.com/uploads/mini/weixuanzhong@2x.png" class="p_img_48 p_margin_r_8" v-if="!isDelAll">
					</image>
					<image src="https://dy.sykj365.com/uploads/mini/xuanzhong@2x.png" class="p_img_48 p_margin_r_8" v-else></image>
					<view class="p_font_24 p_color_7a">全选</view>
				</view>
			</bottomView>
			<image src="https://dy.sykj365.com/uploads/mini/jia4@2x.png" class="p_img_84 print_add" v-if="!isbatchesDel"
				@click="isUpShow = true"></image>
			<view class="bottom_tip">
				<!-- <text class="tip1">领券</text>
				<text class="tip2">下单立减6元</text>
				<text class="tip3">无门槛6元券</text>
				<text class="tip4" @click="getLink">去领取></text> -->
				<text class="tip1">邀请好友奖励3元</text>
				<text class="tip4" @click="getLink">去邀请></text>
			</view>
		</view>
		<!-- 上传方式 -->
		<upload ref="uploadView" :isShow="isUpShow" :cacelShow="cacelShow" @getLoading="getLoadingFileWx"
			@getLoadWord="getLoadingFile" @getPross="getProssWx" @getSuccess="getFileSuccess" @getErros="getErros"
			@getClose="isUpShow = false">
		</upload>
		<!-- 提示 -->
		<tips :tipsShow="tipsShow1" messages="是否删除该文件？" confirmText="确定" cancelText="取消"
			@getDialogCancel="tipsShow1 = false" @getDialogConfirm="getDialogConfirm1"></tips>
		<tips :tipsShow="tipsShow2" messages="请先预览文件并检查打印设置，文件打印后非质量问题不支持退换货，是否已确认预览及打印设置？" confirmText="已确认"
			cancelText="再看看" @getDialogCancel="tipsShow2 = false" @getDialogConfirm="checkAgain"></tips>
		<tips :tipsShow="tipsShow3" messages="未选全部文件，是否继续支付？" confirmText="确定" cancelText="取消"
			@getDialogCancel="tipsShow3 = false" @getDialogConfirm="getDialogConfirm3"></tips>
		<tips :tipsShow="tipsShow4" messages="请先设置文件计算价格" confirmText="确定" @getDialogConfirm="tipsShow4 = false"></tips>
		<tips :tipsShow="tipsShow5" messages="请先预览每个文件排版效果，避免有排版误差，确认无误后进行选择配置!" confirmText="去配置" cancelText="取消"
			@getDialogConfirm="getGoAllSet" @getDialogCancel="tipsShow5 = false"></tips>
		<tips :tipsShow="tipsShow6" messages="当前所选订单均为黑白激光，如需彩色激光请重新选择" confirmText="确定"
			cancelText="取消" @getDialogCancel="tipsShow6 = false" @getDialogConfirm="getDialogConfirm2"></tips>
	</view>
</template>

<script>
	import tips from '../../components/tips.vue';
	import upload from './components/upload.vue';
	import listDataView from '../../components/listData.vue';
	import bottomView from '../../components/bottomView.vue';

	export default {
		components: {
			tips,
			upload,
			listDataView,
			bottomView
		},
		data() {
			return {
				listData: [],
				printIdsList: [], // 待打印列表选中数据
				deleteState: true,
				isUpShow: false,
				isLoadingFile: false,
				loadingFileName: '',
				progress: 0,
				timer: null,
				isAllChoose: false,
				isbatchesDel: false, // 是否批量删除
				isDelAll: false,
				tipsShow1: false,
				tipsShow2: false,
				delInfo: {},
				allPriceNum: 0,
				idsSubmit: '',
				cacelShow: false, // 取消上传
				tipsShow3: false,
				isToPay: true, // 是否选中的文件都是已设置 
				tipsShow4: false,
				tipsShow5: false,
				tipsShow6: false,
				setArrList: [], // 批量操作
				systemNotice: [], // 公告
				//
				brandList: [],
				paperList: [],
				colourList: [],
				priceListNum: [],
				priceData: {
					brand_id: '', // 纸型id
					paper_id: '', // 纸张id
					colour_id: '', // 打印方式
					single_double: '1', // 单双面
					price: '', // 价格
				}
			}
		},
		onLoad() {
			this.getListData();
			this.getNotice();
			this.getBrand();
			this.getPaper();
			this.getColour();
		},
		onShow() {
			if (uni.getStorageSync('set')) {
				// 配置成功
				this.getIdsFun();
				this.getListData(false, true);
				uni.removeStorageSync('set');
			}

			if (uni.getStorageSync('upLoad')) {
				// 本地上传成功
				let a_ = uni.getStorageSync('upLoad');
        console.log('upLoad === ', a_);
        this.handleMultipleUpload(a_, 0);
    //     return;
				// this.getLoadingFile(a_[0].name);
				// this.getFileSuccess(a_[0].path);
				// uni.removeStorageSync('upLoad');
			}

			if (uni.getStorageSync('baiduFiles')) {
				// 百度上传成功
				let a_ = uni.getStorageSync('baiduFiles');
        console.log('baiduFiles === ', a_);
        this.handleMultipleUpload(a_, 0);
				// a_.forEach((n, k) => {
				// 	this.getLoadingFile(n.name);

				// 	let d_ = n.name.split('.');

				// 	if (d_[d_.length - 1] == 'pdf') {
				// 		this.getFileSuccess(n.path);
				// 	} else {
				// 		this.getWordId(n.path);
				// 	}

				// 	if (k == a_.length - 1) {
				// 		uni.removeStorageSync('baiduFiles');
				// 	}
				// })
			}

			if (uni.getStorageSync('yasuobaoFiles')) {
				// 压缩包上传
				let a_ = uni.getStorageSync('yasuobaoFiles');
        console.log('yasuobaoFiles === ', a_);
        this.handleMultipleUpload(a_.map(v => {
          v.path = { url: v.url };
          return v;
        }), 0);

				// a_.forEach((n, k) => {
				// 	this.getLoadingFile(n.name);

				// 	let d_ = n.name.split('.');

				// 	if (d_[d_.length - 1] == 'pdf') {
				// 		this.getFileSuccess(n);
				// 	} else {
				// 		this.getWordId(n);
				// 	}

				// 	if (k == a_.length - 1) {
				// 		uni.removeStorageSync('yasuobaoFiles');
				// 	}
				// })
			}
		},
		methods: {
      // 上传
      handleMultipleUpload(list, i = 0) {
        if (list.length === i) {
          uni.removeStorageSync('upLoad');
          uni.removeStorageSync('yasuobaoFiles');
          uni.removeStorageSync('baiduFiles');
          return;
        }
        this.getLoadingFile(list[i].name);
        
        let d_ = list[i].name.split('.');
        const reg = /^(pdf)$/i;
        if (reg.test(d_[d_.length - 1])) {
        	this.getFileSuccess(list[i].path, () => {
            this.handleMultipleUpload(list, i + 1);
          });
        } else {
        	this.getWordId(list[i].path,  () => {
            this.handleMultipleUpload(list, i + 1);
          });
        };
      },
			// 获取公告
			getNotice() {
				this.$http.get(this.$api.systemNotice).then((res) => {
					if (res.system_notice.length === 0) {
						res.system_notice = ['暂无公告~']
					}
					this.systemNotice = res.system_notice;
				})
			},
			// 获取价格配置参数
			getBrand() {
				this.$http.post(this.$api.brand).then(res => {
					this.brandList = res.data;

					this.priceData.brand_id = res.data[0].id;
					this.getSetPrice();
				})
			},
			getPaper() {
				this.$http.post(this.$api.paper).then(res => {
					this.paperList = res.data;

					res.data.forEach((n) => {
						if (n.name === 'A4') {
							this.priceData.paper_id = n.id;
						}
					})
				})
			},
			getColour() {
				this.$http.post(this.$api.colour).then(res => {
					this.colourList = res.data;

					res.data.forEach((n) => {
						if (n.name === '黑白激光') {
							this.priceData.colour_id = n.id;
						}
					})
				})
			},
			getSetPrice() {
				this.$http.post(this.$api.prints, {
					brand_id: this.priceData.brand_id
				}).then(res => {
					this.priceListNum = res.data;
				})
			},
			// word转pdf
			getWordId(res, success) {
				let self = this;
				let s_u = res.url;

				this.$http.post(this.$api.wordToPdf, {
					file: res.url
				}, true, true).then(res => {
					if (res.code === 20000) {
						res.data.source_file = s_u;
						this.getFileSuccess(res.data, success);
					} else {
						this.getErros();
					}
				})
			},
			getListData(e, i, t, success) {
				this.$http.post(this.$api.cartList).then(res => {
          typeof success === 'function' && success();
					let p_ = 0;
					let id_ = '';
					if (res.data.length > 0) {
						p_ = res.data[0].page;
						id_ = res.data[0].id;
					}

					if (t && p_ === 0) {
						getApp().getMsg('该文件有密码，请解密后上传');
						setTimeout(() => {
							this.getCartDelFun(id_);
						}, 1500)
						return
					}

					if (t && p_ !== 0) {
						getApp().getMsg('上传成功', 'success');
					}

					if (res.data.length > 0) {
						res.data.map((n) => {
							if (n.choose == undefined || e) n.choose = false;
							return n
						})
					}
					this.listData = res.data;

					if (res.data.length === 0 && e) {
						this.isbatchesDel = false;
						this.deleteState = true;
						this.isAllChoose = false;
						this.allPriceNum = 0;
						this.printIdsList = [];
					}

					if (i && this.listData.length > 0) {
						this.getChooseIds();
						this.getDelFun();
						this.getAllPrice();
					}

					uni.setNavigationBarTitle({
						title: '待打印(' + res.data.length + ')'
					});
				})
			},
			getLoadingFile(e) {
				this.isUpShow = false;
				this.loadingFileName = e;
				this.isLoadingFile = true;

				this.timer = setInterval(() => {
					this.progress += 15

					if (this.progress >= 90) {
						clearInterval(this.timer)
					}
				}, 50)

				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				})
				uni.showLoading({
					title: '文件上传中'
				});
			},
			getLoadingFileWx(e) {
				this.isUpShow = false;
				this.loadingFileName = e;
				this.isLoadingFile = true;

				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				})
				uni.showLoading({
					title: '文件上传中'
				});
			},
			getProssWx(e) {
				clearInterval(this.timer)
				this.progress = e;
			},
			getFileSuccess(e, success) {
				let self = this;

				// let arr_ = e.url.split('.');
				// let type = 0 // 0=pdf 1=word
				// if (arr_[arr_.length - 1] === 'pdf' || arr_[arr_.length - 1] === 'PDF') {
				// 	type = 0;
				// } else {
				// 	type = 1;
				// }

				console.log(e)

				this.$http.post(this.$api.cartAdd, {
					file: e.url,
					name: this.loadingFileName,
					source_file: e.source_file ? e.source_file : ''
				}, true).then(res => {
					console.log(res)
					if (res.code == 20000) {
						this.progress = 100;
						this.isLoadingFile = false;
						clearInterval(this.timer)
						setTimeout(() => {
							this.progress = 0;
						}, 100)

						// 取消上传
						if (this.cacelShow) {
							this.getCartDelFun(res.data, true);
						} else {
							this.getIdsFun();
							this.getSetData(res.data, res.page, res.turning, success);
						}
					} else {
						this.getErros(res.msg);
					}

					this.$refs.uploadView.getChooseFiles();
				})
			},
			// 设置默认参数
			getSetData(id, page, turning, success) {
				if (page == 0) {
          if (success && typeof success === 'function') {
            this.getListData(false, true, true, success);
          }
          return;
        }
				let formData = {
					id: id,
					paper: 'A4', // 纸型
					single_double: 1, // 单双面
					binding_type: '不装钉', // 装订方式
					film_covering: '', // 覆膜---传空
					cover_type: '', // 封面内容
					cover_image: '', // ---传空
					reduction_printing: '不缩印',
					print_range: '1-' + page, // 页码 n-m
					num: 1,
					colour: '黑白激光', // 打印方式
					color: '', // 封面颜色
					price: '',
					brand: '80g复印纸', // 纸张
					page_turning: turning, // 翻页方向
				};
				
				console.log(formData)

				let oneP_1 = 0; // 后台设置价格
				let oneN_1 = Math.ceil(page / 2); // 页码数

				if (page == 1) {
					formData.single_double = 0;
					oneN_1 = page;
					this.priceData.single_double = '0';
				} else {
					this.priceData.single_double = '1';
				}
				
				console.log(formData)

				this.priceListNum.forEach((n, k) => {
					if (n.brand_id == this.priceData.brand_id &&
						n.paper_id == this.priceData.paper_id &&
						n.colour_id == this.priceData.colour_id &&
						n.single_double == this.priceData.single_double) {
						formData.commission_switch = n.commission_switch;
						oneP_1 = Number(n.price);
					}
				})

				formData.price = oneP_1 * oneN_1;

				this.$http.post(this.$api.cartEdit, formData).then(res => {
					this.getListData(false, true, true, success);
				})
			},
			// 取消上传---逻辑，上传成功自动删除调
			getCancelUp() {
				this.progress = 0;
				this.isLoadingFile = false;
				this.cacelShow = true;

				setTimeout(() => {
					uni.hideLoading();
				}, 100)

				setTimeout(() => {
					this.cacelShow = false;
				}, 2000)
			},
			// 上传失败
			getErros(e) {
				getApp().getMsg(e ? e : '' + '上传失败');
				this.progress = 0;
				this.isUpShow = false;
				this.isLoadingFile = false;
			},
			// 删除
			getBatchesDel() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				})

				this.isbatchesDel = true;
				this.deleteState = false;
				this.isDelAll = false;

				this.printIdsList = [];
				this.listData.forEach((n) => {
					if (n.choose) this.printIdsList.push(n.id)
					n.choose = false;
				})
			},
			getChoose(i) {
				// 列表选中
				this.listData[i].choose = true;
				this.getDelFun();

				if (!this.isbatchesDel) {
					this.getAllPrice();
				}
			},
			checkAgain() {
				this.tipsShow2 = false;
				if(this.listData.length > 1 && this.listData.every(i => i.colour == '黑白激光')) {
					this.tipsShow6 = true;
				}else {
					this.getDialogConfirm2();
				}
			},
			getIsChoose(i) {
				// 列表取消
				this.listData[i].choose = false;
				this.getDelFun();

				if (!this.isbatchesDel) {
					this.getAllPrice();
				}
			},
			getDelFun() {
				let s_ = true;
				this.listData.forEach((n) => {
					if (!n.choose) s_ = false;
				})

				if (this.isbatchesDel) {
					if (s_) this.isDelAll = true;
					if (!s_) this.isDelAll = false;
				} else {
					if (s_) this.isAllChoose = true;
					if (!s_) this.isAllChoose = false;
				}
			},
			getAllDel() {
				this.isDelAll = !this.isDelAll;

				this.listData.forEach((n) => {
					if (this.isDelAll) n.choose = true;
					if (!this.isDelAll) n.choose = false;
				})
			},
			getAllPrint() {
				this.isAllChoose = !this.isAllChoose;

				this.listData.forEach((n) => {
					if (this.isAllChoose) n.choose = true;
					if (!this.isAllChoose) n.choose = false;
				})

				this.getAllPrice();
			},
			getDelSubmit() {
				let ids = [];
				this.listData.forEach((n) => {
					if (n.choose) ids.push(n.id)
				})

				if (ids.length === 0) return getApp().getMsg('请选择删除数据');

				this.getCartDelFun(ids.toString())
			},
			getDelView(item) {
				this.tipsShow1 = true;
				this.delInfo = item;
			},
			getDialogConfirm1() {
				let ids = this.delInfo.id;
				this.getCartDelFun(ids);
			},
			getCartDelFun(ids, s) {
				this.$http.post(this.$api.cartDel, {
					ids
				}).then(res => {
					if (!s) getApp().getMsg('删除成功', 'success');

					if (this.isbatchesDel) {
						this.getListData(true);
					} else {
						this.getListData(true, true);
					}

					this.tipsShow1 = false;
					this.cacelShow = false;
				})
			},
			getDelClear() {
				this.isbatchesDel = false;
				this.deleteState = true;
				this.getChooseIds();
				this.getDelFun();
				this.getAllPrice();

				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				})
			},
			getChooseIds() {
				this.listData.forEach((n) => {
					if (this.printIdsList.length > 0) {
						this.printIdsList.forEach((m) => {
							if (n.id == m) {
								n.choose = true;
							}
						})
					} else {
						n.choose = false;
					}
				})
			},
			// 存储选中ids
			getIdsFun() {
				this.printIdsList = [];
				this.listData.forEach((n) => {
					if (n.choose) this.printIdsList.push(n.id)
				})
			},
			// 数量
			getChooseNum(item) {
				let n_ = this.listData[item.index].num;

				if (item.type == 0 && n_ == 1) return;

				if (item.type == 0 && n_ != 1) {
					n_--;
				}
				if (item.type == 1) {
					n_++;
				}

				if (item.type == 2) {
					if (item.event === '' || item.event === '0') {
						n_ = 1;
					} else {
						n_ = Number(item.event);
					}
				}

				this.$http.post(this.$api.numEdit, {
					id: this.listData[item.index].id,
					num: n_
				}).then(res => {
					this.listData[item.index].num = n_;
					this.getAllPrice();
				})
			},
			// 总价格
			getAllPrice() {
				this.allPriceNum = 0;

				this.listData.forEach((n) => {
					if (n.choose) this.allPriceNum += (Number(n.price) * Number(n.num));
				})

				this.allPriceNum = this.allPriceNum.toFixed(2)
			},
			// 去支付
			getPaySubmit() {
				let ids = [];
				let s_ = true;
				this.listData.forEach((n) => {
					if (n.choose) {
						ids.push(n.id);
						if (!n.price || n.price === '0.00') {
							s_ = false;
						}
					}
				})

				if (ids.length === 0) return getApp().getMsg('至少选择一个文件');

				this.isToPay = s_;
				this.idsSubmit = ids.toString();

				if (ids.length < this.listData.length) {
					this.tipsShow3 = true;
					return
				}

				if (!this.isToPay) {
					this.tipsShow4 = true;
					return
				}

				this.tipsShow2 = true;
			},
			getDialogConfirm2() {
				let self = this;
				this.tipsShow6 = false;
				getApp().getNavigateTo('/pages/index/confirmOrder?ids=' + self.idsSubmit);
			},
			getDialogConfirm3() {
				this.tipsShow3 = false;
				if (this.isToPay) {
					this.tipsShow2 = true;
				} else {
					this.tipsShow4 = true;
				}
			},
			// 批量设置
			getBatchesSet() {
				let items = [];
				let isAllUp = true; // 是否都是上传的文件，排除资料

				this.listData.forEach((n) => {
					if (n.choose) {
						items.push(n);

						if (n.information != 0) {
							isAllUp = false;
						}
					}
				})

				if (items.length === 0) return getApp().getMsg('至少选择一个文件');
				if (!isAllUp) return getApp().getMsg('资料文件不可配置');
				this.setArrList = items;
				this.tipsShow5 = true;
			},
			getGoAllSet() {
				this.tipsShow5 = false;
				let data_ = encodeURIComponent(JSON.stringify(this.setArrList))
				getApp().getNavigateTo('/pages/index/setBatches?items=' + data_);
			},
			getLink() {
				getApp().getNavigateTo('/pages/my/drawboard');
			},
		},
    onUnload() {
      uni.removeStorageSync('upLoad');
      uni.removeStorageSync('yasuobaoFiles');
      uni.removeStorageSync('baiduFiles');
    }
	}
</script>

<style lang="less">
	.none_wrapper {
		text-align: center;

		image {
			width: 192rpx;
			height: 176rpx;
			margin: 168rpx auto 48rpx;
		}
	}

	.print_btn {
		width: 296rpx;
		height: 88rpx;
		border-radius: 56rpx;
		background-color: #05B570;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 128rpx auto 0;

		image {
			width: 24rpx;
			height: 24rpx;
			margin: 0 8rpx 0 0;
		}

		view {
			color: #fff;
		}
	}

	.print_top {
		width: 100%;
		height: 92rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		box-shadow: 0px 5rpx 10rpx #F3F3F3;
		background-color: #fff;
		position: fixed;
		top: 0;
		z-index: 999;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;

			&.active {
				width: 24rpx;
				height: 24rpx;
				padding: 4rpx;
			}
		}
	}

	.print_main {
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-bottom: 240rpx;
		overflow: hidden;
		min-height: calc(100vh - 270rpx);
		background-color: #F3F3F3;
	}

	.print_list {
		padding: 32rpx;
		margin: 32rpx 0;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.progress_wrapper {
		width: 100%;
		height: 12rpx;
		border-radius: 60rpx;
		background-color: #E8E8E8;

		view {
			width: 0%;
			height: 12rpx;
			border-radius: 60rpx;
			background-color: #05B570;
		}
	}

	.print_add {
		position: fixed;
		bottom: 192rpx;
		right: 32rpx;
	}

	.tips_wrapper {
		height: 50rpx;
		position: fixed;
		top: 92rpx;
		left: 0;
		right: 0;
		padding: 0 32rpx;
		background-color: #DBECE5;
		z-index: 999;
	}
	.bottom_tip {
		position: fixed;
		bottom: 128rpx;
		width: 100%;
		height: 52rpx;
		line-height: 52rpx;
		background-color: antiquewhite;
		font-size: 22rpx;
		overflow: hidden;
		.tip1 {
			color: #e80f0f;
			font-weight: bold;
			margin-left: 20rpx;
		}
		.tip2 {
			color: #000000;
			font-weight: bold;
			margin-right: 22rpx;
		}
		.tip3 {
			color: #e22424;
			border: 1px solid #eae0bf;
			padding: 2rpx 6rpx;
			border-radius: 3rpx;
		}
		.tip4 {
			color: #e22424;
			font-weight: bold;
			float: right;
			margin-right: 20rpx;
		}
	}
</style>
